<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script
      src="js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <style type="text/css">
      .conbody {
        background-image: url(img/e1e28da161ea68ca4d92e1a2831b32a.png) !important;
      }

      #product {
        /* width: 60%;
				margin: 0 auto; */
      }

      .item {
        margin: 20px auto;
        width: 1204px;
        height: 854px;
        background-image: url(img/de8f3fcb657e5cf09fa0d79fe471ca3.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
      }

      .texts {
        width: 50rem;
        position: absolute;
        left: 5rem;
        bottom: 2rem;
        color: #ffffff;
        font-size: 17px;
        line-height: 30px;
      }

      .row_btn {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        padding-top: 10.5rem;
      }

      .row_btn .left,
      .row_btn .right {
        width: 42%;
        height: 6.5rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .row_btn .left {
        background-image: url(./img/c99d9893ccc9888129ffc37ffc0530f.png);
      }

      .row_btn .left:hover,
      .row_btn .left.action {
        background-image: url(./img/de64beb0bdbad1747a2c666760cc2c2.png);
        cursor: pointer;
      }

      .row_btn .right {
        background-image: url(./img/ce9b9a80721835b82f531f280903ba0.png);
      }

      .row_btn .right:hover,
      .row_btn .right.action {
        background-image: url(./img/3eddc85cd468f837b6eafc486416693.png);
        cursor: pointer;
      }

      .row_btn .conter {
        margin-top: 100px;
        color: whitesmoke;
        /* position: relative; */
      }

      .row_btn .conter:hover,
      .row_btn .conter.action {
        cursor: pointer;
      }

      .row_btn .conter:hover img,
      .row_btn .conter.action img {
        opacity: 1;
      }

      .row_btn .conter img {
        /* width: 600px; */
        width: 54rem;
        height: 43rem;
        position: absolute;
        left: 50%;
        margin-left: -27rem;
        top: 5rem;
        z-index: -1;
        opacity: 0;
      }

      .row_btn .conter p {
        text-align: center;
        font-size: 18px;
        white-space: nowrap;
        color: #64d0e5;
      }

      .row_btn .conter p span {
        color: #c838d8;
      }
    </style>
  </head>
  <body class="conbody">
    <div id="product">
      <!-- <img src="img/e6699ad0ceed58e9a83b07321d7099a.png">
			<div id="">

			</div> -->
      <div class="header">
        <div class="left">苏州工业园区数字政府典型场景</div>
        <div class="right">
          <a href="javascript:void(0);" class="action">首页</a>
          <a href="Intellectualization.html">智慧化场景</a>
          <a href="integrated.html">整体性转型</a>
          <a href="base.html">平台型底座 </a>
        </div>
      </div>

      <div class="item">
        <div class="row_btn">
          <div class="left" :class="id==0?'action':''" @click="btn(0)"></div>
          <div class="conter" :class="id==1?'action':''" @click="btn(1)">
            <p><span>1</span>平台型底座</p>
            <p>(Platform)</p>
            <img src="img/c564b864666a305091582c27ea6ffe0.png" />
          </div>
          <div class="right" :class="id==2?'action':''" @click="btn(2)"></div>
        </div>
        <div class="texts">{{id?list[id]:list[0]}}</div>
      </div>
      <div style="height: 1px; padding: 1px"></div>

      <div class="footer">
        建设单位：苏州工业园区大数据管理局
        &nbsp;&nbsp;&nbsp;&nbsp;技术支持：新建元数字科技有限公司、天聚地合（苏州）数据股份有限公司
      </div>
    </div>

    <script src="js/util.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var product = new Vue({
        el: "#product",
        data: {
          id: null,
          list: [
            "“数据资源”需从全局角度考虑，",
            "体现数据治理、数据共享、数据资产维度内容，",
            "同时以专题形式呈现防疫、城市运行、经济大脑等数据资源",
          ],
        },
        created() {},
        mounted() {
          console.log((1204 / 5) * 3);

          console.log((854 / 5) * 3);
        },
        methods: {
          btn(tabs) {
            console.log(tabs);
            this.id = tabs;
          },
        },
      });
    </script>
  </body>
</html>
